<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 等待页面加载所有资源(包括外部资源, 图片, 外联css和JavaScript)完成后执行
        // window.addEventListener("load", function () {
        //     const btn = document.querySelector("button")
        //     btn.addEventListener("click", function () {
        //         alert("按钮被点击了")
        //     })
        // })
        // 也可以针对特定元素绑定加载事件
        // const img = document.querySelector("img")
        // img.addEventListener("load", function () {

        // })


        // DOMContentLoaded事件会在DOM结构加载完成后触发, 不需要等待图片等外部资源加载完成, 速度更快
        document.addEventListener("DOMContentLoaded", function () {
            const btn = document.querySelector("button")
            btn.addEventListener("click", function () {
                alert("按钮被点击了")
            })
        })
    </script>
</head>

<body>
    <button>按钮</button>
    <!-- <script>
        const btn = document.querySelector("button")
        btn.addEventListener("click", function () {
            alert("按钮被点击了")
        })
    </script> -->
</body>

</html>